<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
</head>
<body>
    <section class="aui-grid aui-margin-b-15">
        <div class="aui-row">
            <div class="aui-col-xs-4">
                <div class="aui-badge">88</div>
                <i class="aui-iconfont aui-icon-home"></i>
                <div class="aui-grid-label">首页</div>
            </div>
            <div class="aui-col-xs-4">
                <i class="aui-iconfont aui-icon-gear"></i>
                <div class="aui-grid-label">设置</div>
            </div>
            <div class="aui-col-xs-4">
                <i class="aui-iconfont aui-icon-map"></i>
                <div class="aui-grid-label">地图</div>
            </div>
            <div class="aui-col-xs-4">
                <i class="aui-iconfont aui-icon-calendar"></i>
                <div class="aui-grid-label">日历</div>
            </div>
            <div class="aui-col-xs-4">
                <div class="aui-badge"></div>
                <i class="aui-iconfont aui-icon-date"></i>
                <div class="aui-grid-label">日期</div>
            </div>
            <div class="aui-col-xs-4">
                <div class="aui-dot"></div>
                <i class="aui-iconfont aui-icon-cart"></i>
                <div class="aui-grid-label">购物车</div>
            </div>
        </div>
    </section>
    <section class="aui-grid">
        <div class="aui-row">
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-home"></i>
                <div class="aui-grid-label">首页</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-gear"></i>
                <div class="aui-grid-label">设置</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-map"></i>
                <div class="aui-grid-label">地图</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-calendar"></i>
                <div class="aui-grid-label">日历</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-date"></i>
                <div class="aui-grid-label">日期</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-cart"></i>
                <div class="aui-grid-label">购物车</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-paper"></i>
                <div class="aui-grid-label">发现</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-video"></i>
                <div class="aui-grid-label">视频</div>
            </div>
        </div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    var tab = document.querySelectorAll(".aui-tab-item");
    for(var i in tab){
        tab[i].onclick = function(e){
            document.querySelector(".aui-tab-item.aui-active").classList.remove("aui-active");
            e.target.classList.add("aui-active");
        }
    }
</script>
</html>